<template>
	<view class="houses">
		<HMfilterDropdown :menuTop="0" :filterData="filterData" :defaultSelected ="defaultSelected"  :updateMenuName="true" @confirm="confirm" dataFormat="Object"></HMfilterDropdown>
		
		<view class="hous" @click="shuru()">
			<view class="search">
				<p>
					请输入楼盘名或区域
				</p>
			</view>
		</view>
		<!-- 输入框 -->
		<view class="gruping">
		  <view class="entrance">
		    <ul>
		      <li v-for="(item,index ) in sites" :key="index" @click="hreftwo(item.ename)">
		          <img :src="item.img" />
		        <p>{{ item.name }}</p>
		      </li>
		    </ul>
		  </view>
		</view>
		
		<!-- 楼盘 -->
		<view class="loupan">
		      <view class="boy">
		          <view v-for="(item, index) in lists" :key="index" @click="details(item.id)" id="label_abtest_value" class="house-list hl-padding card-list-box">
		              <view class="list-con click-position" data-position="10">
		                  <view class="media-house2 rmlp-item-con3">    
		                      <img class="lazy-timeout-click" :src="item.image"/>
		                      <view class="eye">
		                          <img src="../../../static/img00/yey.png" />
		                          <span>{{item.click_page}}</span>
		                      </view>
		                      <view class="text">
		                          <view class="house-name">
		                              <h4 class="click-position" >{{item.title}}</h4>
		                              <span  class="j-lb click-position ss-zs">在售</span>
		                          </view>
		                          <view class="nearby click-position" >
		                              <span class="nearby-in">{{item.tag_name_arr[0]}}</span>
		                          </view>
		                          <p class="house-infor click-position">
		                              <span>{{item.qu}}</span>
		                              <span class="h-area">{{item.area}}</span>
		                          </p>
		                          <view class="dynamic">
		                              <p class="price click-position" >
		                                  <span>{{item.price_page}}</span>
		                              </p>
		                          </view>
		                      </view>
		                  </view>
		              </view>
		          </view>
				  
				  <view v-if="is_zanwu == 1" class="zanwu">暂无内容</view>
		      </view>
		</view>
		<!-- 楼盘end -->
		
		
		<view>
		    <view v-if="is_refresh" class="refresh">
		        <img src="../../../static/img00/refresh.gif" alt="">
		    </view>
			
			<view v-if="is_none" class="refresh none">
			    没有更多内容了
			</view>
			
		    <view class="footer-audit">
		        <ul>
		            <li>
		                杭州房象网络科技有限公司
		            </li>
		
		            <li>
		                地址：浙江省杭州市余杭区盛德国际商务中心1幢5楼 
		            </li>
		
		            <li>
		                联系电话：<span>400-831-0818</span>
		            </li>
		
		            <li>
		                网络经营许可证：浙ICP备20028559号-1 <a @click="about()" >关于房象</a>
		            </li>
		
		        </ul>
		    </view>
		
		</view>

		<!-- <view class="fixed">
			<fixed></fixed>
		</view> -->
		
		<view class="bottom"></view>
		<tabBar></tabBar>
	</view>
</template>

<script>
	// 引入组件
	// import gouping from "./Grouping";
	import HMfilterDropdown from '@/components/Dropdown/dropdown.vue';
	import Hloupan from 'pages/index/houses/Hloupan';
	import Bottom from 'pages/index/houses/Bottom';
	import Fixed from 'pages/index/houses/Fixed';
	import tabBar from '@/components/tabBar/tabBar.vue'
	
	export default {
		components: {
			// gouping,
			HMfilterDropdown,
			Hloupan,
			Bottom,
			Fixed,
			tabBar
		},

		data() {
			return {
				sites: [
				  { name: "楼盘查询", img: require("../../../static/img00/download7.png"),ename:'loupan' },
				  { name: "在售楼盘", img: require("../../../static/img00/download8.png"),ename:'zaishou' },
				  { name: "优惠新房", img: require("../../../static/img00/download.png"),ename:'youhui' },
				  { name: "帮你找房", img: require("../../../static/img00/download9.png"),ename:'bangni' },
				  { name: "免费专车", img: require("../../../static/img00/download10.png") ,ename:'mianfei'},
				],
				
				indexArr:'',
				valueArr:'',
				defaultSelected:[],
				filterData:[],
				filterDropdownValue:[],
				lists:[],
				pageCode:2,//当前页
				TotalPage:1,//总页数
				is_refresh:0,
				is_none:0,
				maptype:0,
				is_zanwu:0,//暂无内容
				keyWord:''
			}
		},
		filters: {
			outData(value) {
				return JSON.stringify(value);
			}
		},
		onLoad: function(e) {
			if(e.keyWord){
				this.keyWord = e.keyWord;
			}else{
				this.keyWord = '';
			}
			console.log(this.keyWord);
			//定时器模拟ajax异步请求数据
			setTimeout(() => {
				this.filterData =  [{
					"name": "区域",
					"type": "hierarchy",
					"submenu": [{
						"name": "区域",
						"value": "区域",
						"submenu": [
							{
							"name": "区域",
							"value": "0"
						}, {
							"name": "拱墅区",
							"value": "拱墅区"
						}, {
							"name": "下城区",
							"value": "111"
						}, {
							"name": "上城区",
							"value": "上城区"
						}, {
							"name": "西湖区",
							"value": "西湖区"
						}, {
							"name": "余杭区",
							"value": "余杭区"
						}]
					}, {
						"name": "地铁",
						"value": "地铁",
						"submenu": [
							{
								"name": "地铁",
								"value": "0",
								"submenu": []
							},{
							"name": "1号线",
							"value": "1号线",
							"submenu": []
						}, {
							"name": "2号线",
							"value": "2号线",
							"submenu": []
						}, {
							"name": "3号线",
							"value": "3号线",
							"submenu": []
						}, {
							"name": "4号线",
							"value": "4号线",
							"submenu": []
						}, {
							"name": "5号线",
							"value": "5号线",
							"submenu": []
						}]
					}]
				}, {
					"name": "价格",
					"type": "hierarchy",
					"submenu": [{
						"name": "总价",
						"value": "总价",
						"submenu": [{
							"name": "价格",
							"value": "0"
						}, {
							"name": "<100万",
							"value": "100"
						}, {
							"name": "100-120万",
							"value": "100-120"
						}, {
							"name": "120-150万",
							"value": "120-150"
						}, {
							"name": "200-300万",
							"value": "200-300"
						}, {
							"name": ">300",
							"value": "300"
						}]
					}, {
						"name": "单价",
						"value": "单价",
						"submenu": [
							{
								"name": "单价",
								"value": "0",
								"submenu": []
							},{
							"name": "<1万",
							"value": "1",
							"submenu": []
						}, {
							"name": "1-2万",
							"value": "1-2",
							"submenu": []
						}, {
							"name": "2-3万",
							"value": "2-3",
							"submenu": []
						}, {
							"name": ">3万",
							"value": "3",
							"submenu": []
						}]
					}]
				},{
					"name": "户型",
					"type": "hierarchy",
					"submenu": [{
						"name": "户型",
						"value": "户型",
						"submenu": [{
							"name": "户型",
							"value": "0"
						}, {
							"name": "<100万",
							"value": "100"
						}, {
							"name": "100-120万",
							"value": "100-120"
						}, {
							"name": "120-150万",
							"value": "120-150"
						}, {
							"name": "200-300万",
							"value": "200-300"
						}, {
							"name": ">300",
							"value": "300"
						}]
					}]
				}, {
					"name": "更多",
					"type": "filter",
					"submenu": [{
						"name": "类型",
						"submenu": [{
							"name": "不限",
							"value": "0",
							"submenu": []
						}, {
							"name": "住宅",
							"value": "0",
							"submenu": []
						}, {
							"name": "别墅",
							"value": "1",
							"submenu": []
						}]
					}, {
						"name": "服务",
						"submenu": [{
							"name": "预定",
							"value": "0",
							"submenu": []
						}, {
							"name": "点餐",
							"value": "0",
							"submenu": []
						}, {
							"name": "外卖",
							"value": "外卖",
							"submenu": []
						}, {
							"name": "WIFI",
							"value": "WIFI",
							"submenu": []
						}, {
							"name": "停车位",
							"value": "停车位",
							"submenu": []
						}, {
							"name": "无烟区",
							"value": "无烟区",
							"submenu": []
						}, {
							"name": "包厢",
							"value": "包厢",
							"submenu": []
						}, {
							"name": "营业中",
							"value": "营业中",
							"submenu": []
						}]
					}, {
						"name": "价格",
						"submenu": [{
							"name": "50以下",
							"value": "0",
							"submenu": []
						}, {
							"name": "50-100",
							"value": "50-100",
							"submenu": []
						}, {
							"name": "100-300",
							"value": "100-300",
							"submenu": []
						}, {
							"name": "300以上",
							"value": "300以上",
							"submenu": []
						}]
					}]
				},
				{
					"name": "||",
					"type": "hierarchy",
					"submenu": [{
						"name": "不限",
						"value": "0",
						"submenu": []
					}, {
						"name": "点击量",
						"value": "1",
						"submenu": []
					}, {
						"name": "单价从低到高",
						"value": "2",
						"submenu": []
					}, {
						"name": "单价从高到低",
						"value": "3",
						"submenu": []
					}, {
						"name": "成交量",
						"value": "4",
						"submenu": []
					}],

					}]; 
				// console.log(`this.filterData==${JSON.stringify(this.filterData)}`)
				//设置选中项
				// 一下的注释是针对测试数据说明结构的意思，具体传入什么数据，要看你自己数据。如果data.js数据有修改，注意defaultSelected也要修改
				//传入defaultSelected的结构不能错，错了就报错运行异常。 不想选中的请传入null
				this.defaultSelected = [
					[0,0],				//第0个菜单选中 一级菜单的第1项，二级菜单的第1项，三级菜单的第3项
					[0,0],			//第1个菜单选中 都不选中
					[0,0],					//第2个菜单选中 一级菜单的第1项
					[[0],[1,2,7],[1,0]],	//筛选菜单选中 第一个筛选的第0项，第二个筛选的第1,2,7项，第三个筛选的第1,0项
					[[0],[1],[1]]			//单选菜单选中 第一个筛选的第0项，第二个筛选的第1项，第三个筛选的第1项
				];
				
			}, 100);
			
			setTimeout(()=>{
				this.initData(0);
			},1000)
		},
		//触底加载更多
		 
		onReachBottom(e) {
			//console.log('触底加载更多');
			this.initData(1);
		},
		
		methods: {
			details(id){
				this.$common.navigateTo("../details/Details?loupan_id="+id);
			},
			hreftwo(ename){
				if(ename == 'loupan'){
					this.$common.navigateTo("./AllHouses");
				}
				if(ename == 'zaishou'){
					this.maptype = 1;
					this.initData(0);
				}
				if(ename == 'youhui'){
					this.maptype = 2;
					this.initData(0);
				}
				//帮你找房
				if(ename == 'bangni'){
					this.$common.navigateTo("../seek/Seek");
				}
				//免费专车
				if(ename == 'mianfei'){
					this.$common.navigateTo("../tailored/Tailored");
				}
				
			},
			// 初始化获取数据
			initData(is_loading) {
				let that = this;
				that.is_refresh = 1;
				this.$api.getPageLoupan({
						is_loading:is_loading,
						pageCode:that.pageCode,
						indexArr:that.indexArr,
						valueArr:that.valueArr,
						maptype:that.maptype,
						keywords:that.keyWord
					},
					res => {
						// if(res.data.lists.length <= 0){
						// 	this.is_zanwu = 1;
						// 	this.is_none = 0;
						// 	return false;
						// }
						this.is_zanwu = 0;
						if(is_loading == 1){
							if(that.pageCode <= that.TotalPage){
								if(res.data.lists.length>0){
									for(var i=0;i<res.data.lists.length;i++){                    
										that.lists.push(res.data.lists[i]); // 加载的数据追加在上一页后面
									}
								}
								that.pageCode = that.pageCode + 1;
								that.is_refresh = 0;
							}else{
								that.is_refresh = 0;
								that.is_none = 1;
							}
						}else{ 
							
							console.log(res);
							that.filterData[0].submenu[0].submenu = res.data.search.city_qu;
							that.filterData[0].submenu[1].submenu = res.data.search.metro_res;
							
							that.filterData[1].submenu[0].submenu = res.data.search.total_cate;
							that.filterData[1].submenu[1].submenu = res.data.search.price_cate;
							
							that.filterData[2].submenu[0].submenu = res.data.search.huxing_cate;
							
							// console.log(res.data.search.huxing_cate)
							// if(res.data.search.huxing_cate){
							// 	that.filterData[2].submenu = [];
							// 	for(var i=0;i<res.data.search.huxing_cate.length;i++){                    
							// 		that.filterData[2].submenu.push(res.data.search.huxing_cate[i]); // 加载的数据追加在上一页后面
							// 	}
							// }
							
							// that.filterData[2].submenu = res.data.search.huxing_cate;
							that.filterData[3].submenu = res.data.search.more_cate;
							if(res.data.lists.length <= 0){
								that.is_zanwu = 1;
								that.is_none = 0;
							}
							
							that.lists = res.data.lists;
							that.TotalPage = res.data.TotalPage;
							that.is_refresh = 0;
							
						}
					}
				);
			},
			//接收菜单结果

			confirm(e){
				this.indexArr = e.index;
				this.valueArr = e.value;
				this.keyWord = '';
				this.initData(0);
				// console.log(e.value)
			},
			//修改选中项-示例
			changeSelected(){
				this.defaultSelected = [];
				this.$nextTick(()=>{
					this.defaultSelected = [
						[1,1,0],				//第0个菜单选中 一级菜单的第1项，二级菜单的第1项，三级菜单的第3项
						[null,null],			//第1个菜单选中 都不选中
						[1],					//第2个菜单选中 一级菜单的第1项
						[[0],[1,2,7],[1,0]],	//筛选菜单选中 第一个筛选的第0项，第二个筛选的第1,2,7项，第三个筛选的第1,0项
						[[0],[1],[1]]			//单选菜单选中 第一个筛选的第0项，第二个筛选的第1项，第三个筛选的第1项
					];
				})
			},
			about(){
			    this.$common.navigateTo("/pages/index/protocol/Protocol?id=8")
			},
			//跳转输入区页面
			shuru(){
			    this.$common.navigateTo("/pages/index/shuru/Shuru")
			},
		}


	}
</script>

<style scoped>
	.hous {
		height: 90rpx;
		width: 750rpx;
		background: #fff;
		border-top: 1px solid #a9bacf;
	
	}

	.search {
		height: 66rpx;
		line-height: 66rpx;
		width: 670rpx;
		margin: 0 auto;
		margin-top: 24rpx;
		background: #f8f8f8;
		display: flex;
		border-radius: 100rpx;
		-moz-border-radius:100rpx;

	}

	.search>p {
		color: #a9bacf;
		margin: 0 auto;
	}
	.fixed{
		height: 114rpx;
		width: 760rpx;
		background: #fff;
		margin: 0 auto;
		position: fixed;
		bottom: 0;
		z-index: 999;  
	}
	
	/* 楼盘 */
	.loupan{
	    /* height: 15rem; */
	    /* margin-top:4.5rem; */
	    background: #fff;
	    padding-bottom: 30rpx;
	}
	.boy{
	    /* height: 17.5rem; */
	    background: #fff;
	    margin-left: 40rpx;
	    margin-right: 40rpx;
	}
	
	
	.house-list{
	    height: 168rpx;
	    width: 670rpx;
	    margin-top: 30rpx;
	    padding-top: 30rpx;
	}
	.lazy-timeout-click{
	    height: 168rpx;
	    width: 224rpx;
	    float: left;
	}
	.eye{
	    width: 200rpx;
	    background: #000;
	    margin-left: -210rpx;
	    margin-top: 120rpx;
	    float: left;
	    text-align: center;
	    opacity: .6;
	}
	
	.eye>img{
		width:50rpx;
		height:30rpx;
	    /* color: #fff ;
	    position: relative; */
	}
	.eye>span{
	    color: #fff;
	}
	
	.text{
	    height: 160rpx;
	    width: 424rpx;
	
	    float: left;
	    margin-left: 14rpx;
	}
	.house-name{
	    width: 428rpx;
	    height: 50rpx;
	}
	.house-name>h4{
	    float: left;
	    margin-top: 6rpx;
	}
	.house-name>span{
	    float:right;
	    padding: 6rpx;
	    /* margin-left: 9.3rem; */
	    font-size: 20rpx;
	    background: #0ad487;
	    border-radius: 6rpx;
	    color: #fff;
	}
	.nearby{
	    height: 32rpx;
	    line-height: 32rpx;
	}
	.nearby>span{
	    font-size: 20rpx;
	    padding: 6rpx;
	    background: #f3f6f9;
	    border-radius: 6rpx;
	    color: #13c3c3;
	}
	
	.house-infor{
	    height: 40rpx;
	    width: 428rpx;
	    font-size: 24rpx;
	   margin-top: 14rpx;
	}
	  .house-infor>span{
	      margin-right: 20rpx;
	  }
	  .price {
	      width: 420rpx;
	      height: 40rpx;
	      margin-top: -4rpx;
	  }
	  .price >span{
	      color: #fa5f35;
	      font-size: 28rpx;
	      font-weight: 550;
	  }
	
	
	
	
	.refresh>img{
		width:250rpx;
	    height: 40rpx;
	    margin-left:240rpx;
	    margin-top: 20rpx;
	}
	ul{
	    height: 234rpx;
	    /* background: #f3f6f9; */
	    font-size: 12px;
	    color: #a9bacf;
	    /* margin-top: 1rem;
	    margin-left: 2rem; */
	}
	ul>li{
	    line-height:40rpx;
	}
	ul>li>a{
	    color: #a9bacf;
	    margin-left: 120rpx;
	}
	
	
	.none{
		text-align: center;
		margin-top: 20rpx;
	}
	
	
	/* 菜单 */
	*{
	  margin: 0;
		padding: 0;
	}
	.gruping{
		background: #fff;;
	}
	.entrance {
	  height: 340rpx;
	  margin-bottom:40rpx;
	}
	.entrance > ul {
	  height: 260rpx;
	  display: flex;
	  flex-wrap: wrap;
	  padding-top: 40rpx;
	
	}
	.entrance > ul > li {
	  list-style: none;
	  width: 136rpx;
	  height:136rpx;
	  margin-left:46rpx;
	
	}
	.entrance>ul>li>img{
		height: 54rpx;
		width: 54rpx;
		margin-top: 20rpx;
		margin-left: 30rpx;
	}
	.footer-audit{
		margin-top:20rpx;
	}
	.zanwu{
		padding: 60rpx;
		text-align: center;
	}
	.bottom{
		height: 120rpx;
	}
</style>

